.cxp-form {
  /*表单页面末尾按钮样式*/
  .button-style {
    margin-top: 50px;
  }
}
/**表单-普通样式**/
.cxp-form.default-style {
  /**默认只有item组件下的场景：**/
  & > .table {
    display: grid !important;
    border: 1px solid transparent;
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    gap: 20px;
    // background-color: #dee2e6; /* 设置背景色 */
    padding-bottom: 0px;
    min-width: min-content;
    position: relative;

    & > div {
      min-height: 32px;
      margin-bottom: 0px;
      background-color: white;
      border-width: 0;
      /*表格item样式*/
      .el-form-item__label {
        // background: #f2f3f5;
        padding-right: 0px;
        // height: initial;
        justify-content: flex-start;
        border-right: 1px solid transparent;
        // padding: 0px 5px;
        margin-right: 12px;
        align-items: center;
        font-weight: normal;
        color: #303133;
        line-height: 20px;
        font-size: 14px;
        &::before {
          //   margin-top: 4px;
          //   margin-right: 4px;
          //   color: #f55352;
          //   // content: '';
          margin-right: 0px;
          width: auto;
        }
      }
      .el-form-item__content {
        // height: initial;
        // padding: 4px 8px;
        // & > div {
        //   height: initial;
        //   margin-top: 4px;
        //   margin-bottom: 4px;
        // }
        // & > .el-textarea {
        //   height: calc(100% - 8px);
        //   .el-textarea__inner {
        //     height: 100%;
        //   }
        // }
      }
    }
    // /** 合并两列**/
    // & > .span2 {
    //   grid-column-start: span 2;
    // }
    // /** 合并三列**/
    // & > .span3 {
    //   grid-column-start: span 3;
    // }
  }
  /*双列样式*/
  &.two-col > .table {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    // min-width: 760px;/* 最少的宽度 */
  }
  /*三列样式*/
  &.three-col > .table {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    // min-width: 1140px;/* 最少的宽度 */
  }
  /*四列样式*/
  &.four-col > .table {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    // min-width: 1520px;/* 最少的宽度 */
  }
  /*form套折叠的样式*/
  & > .cxp-collapse {
    .el-collapse-item__content {
      .form-item {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0px;
        }
      }
    }
  }
}
/**表单-普通样式-纯文本**/
.cxp-form.default-style.text-style {
  & > .table {
    gap: 4px 20px;
    & > div {
      .el-form-item__label {
        margin-right: 0px;
      }
    }
  }
}

/**表单-页面样式-带表格**/
.cxp-form.table-style {
  /**默认只有item组件下的场景：**/
  & > .table {
    display: grid !important;
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    background-color: #fff; /* 设置背景色 */
    padding-bottom: 0px;
    position: relative;

    & > div {
      min-height: 36px;
      background-color: white;
      border: 1px solid #dee2e6;
      margin: 0px -1px -1px 0px;
      /*表格item样式*/
      .el-form-item__label {
        background: #f2f3f5;
        padding-right: 0px;
        justify-content: flex-start;
        border-right: 1px solid #dee2e6;
        padding: 0px 12px;
        align-items: center;
        font-weight: 400;
        color: #303133;
        line-height: 20px;
        font-size: 14px;
        &::before {
          margin-top: 4px;
          width: 7px;
        }
      }
      .el-form-item__content {
        padding: 4px 8px;
        & > .error {
          position: static;
          margin-top: 4px;
        }
      }
    }
    /*单列样式*/
    .form-item:first-child {
      margin-top: -1px;
    }
  }
  /*双列样式*/
  &.two-col > .table {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    /*边框样式处理*/
    .form-item:nth-child(-n + 2) {
      margin-top: -1px;
    }
    .form-item:first-child.span2 {
      & + .form-item {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(2).span2 {
      margin-top: 0px;
    }
  }
  /*三列样式*/
  &.three-col > .table {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    /*边框样式处理*/
    /*无合并*/
    .form-item:nth-child(-n + 3) {
      margin-top: -1px;
    }
    /*合并2列*/
    .form-item:first-child.span2 {
      & + .form-item + .form-item {
        margin-top: 0px;
        &.span {
          & + .form-item {
            margin-top: 0px;
          }
        }
      }
      & + .form-item.span {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(2).span2 {
      & + .form-item {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(3).span2 {
      & + .form-item {
        margin-top: -1px;
        &.span {
          margin-top: 0px;
        }
      }
    }
    /*合并3列*/
    .form-item:first-child.span3 {
      & + .form-item {
        margin-top: 0px;
        &.span {
          & + .form-item + .form-item {
            margin-top: 0px;
          }
        }
      }
      & + .form-item + .form-item {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(2).span3 {
      margin-top: 0px;
      & + .form-item {
        margin-top: 0px;
        &.span2 {
          & + .form-item {
            margin-top: 0px;
          }
        }
      }
    }
    .form-item:nth-child(3).span3 {
      margin-top: 0px;
    }
  }
  /**折叠组件下的场景：**/
  & > .cxp-collapse {
    /*grid布局*/
    .el-collapse-item__content {
      display: grid;
      border-top: 1px solid #dee2e6;
      border-right: 1px solid #dee2e6;
      border-bottom: 1px solid #dee2e6;
      grid-template-columns: repeat(1, minmax(200px, 1fr));
      background-color: #fff;
      padding-bottom: 0px;
      position: relative;
      & > div {
        min-height: 36px;
        border: 1px solid #dee2e6;
        margin: 0px -1px -1px 0px;
        /*表格item样式*/
        .el-form-item__label {
          background: #f2f3f5;
          padding-right: 0px;
          // height: initial;
          justify-content: flex-start;
          border-right: 1px solid #dee2e6;
          padding: 0px 12px;
          align-items: center;
          font-weight: 400;
          color: #303133;
          line-height: 20px;
          font-size: 14px;
        }
        .el-form-item__content {
          padding: 4px 8px;
          & > .error {
            position: static;
            margin-top: 4px;
          }
        }
      }
      /*单列样式*/
      .form-item:first-child {
        margin-top: -1px;
      }
    }
  }
  /*双列样式*/
  &.two-col > .cxp-collapse .el-collapse-item__content {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    /*边框样式处理*/
    .form-item:nth-child(-n + 2) {
      margin-top: -1px;
    }
    .form-item:first-child.span2 {
      & + .form-item {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(2).span2 {
      margin-top: 0px;
    }
  }
  /*三列样式*/
  &.three-col > .cxp-collapse .el-collapse-item__content {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    /*边框样式处理*/
    /*无合并*/
    .form-item:nth-child(-n + 3) {
      margin-top: -1px;
    }
    /*合并2列*/
    .form-item:first-child.span2 {
      & + .form-item + .form-item {
        margin-top: 0px;
        &.span {
          & + .form-item {
            margin-top: 0px;
          }
        }
      }
      & + .form-item.span {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(2).span2 {
      & + .form-item {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(3).span2 {
      & + .form-item {
        margin-top: -1px;
        &.span {
          margin-top: 0px;
        }
      }
    }
    /*合并3列*/
    .form-item:first-child.span3 {
      & + .form-item {
        margin-top: 0px;
        &.span {
          & + .form-item + .form-item {
            margin-top: 0px;
          }
        }
      }
      & + .form-item + .form-item {
        margin-top: 0px;
      }
    }
    .form-item:nth-child(2).span3 {
      margin-top: 0px;
      & + .form-item {
        margin-top: 0px;
        &.span2 {
          & + .form-item {
            margin-top: 0px;
          }
        }
      }
    }
    .form-item:nth-child(3).span3 {
      margin-top: 0px;
    }
  }
}
/*表格内的表单样式*/
.cxp-form .cxp-table-v2 {
  .form-item {
    margin-bottom: 0px;
    .el-form-item__label {
      display: none;
    }
    .el-form-item__content {
      min-width: auto;
      padding: 0px !important;
    }
    .error {
      margin-top: 4px;
      position: static;
    }
  }
}

